tags: ItIron2022 Javascript

前言

我們昨天處理完了image-slider/carousel的基本ui以及水平捲動功能，目前我們還有兩個小問題要處理，你可以配合著下方的demo一起看。

1. indicators的點擊功能。
2. 圖片捲動時indicator要有對應的變化，active時需要變白、變大讓使用者知道哪張圖片是目前正在瀏覽的。

Getting started

Step1: 加入indicators的點擊功能

這一部分其實極為簡單，我們要做的事情只是在點擊indicator時，讓對應的圖片滑入畫面內就行了！ DOM操作中有一個scrollIntoView的語法可以讓我們輕鬆達到這一點。

那麼我們接下來要做的事情就是以下幾步了

1. 選中indicator, image元素
2. 在每個indicator上掛上監聽器(其實你也可以只用一個監聽器來處理，這個交給你想)
3. 每個indicator根據index會對應到一張圖片，加入點擊事件讓對應的圖片滑入頁面中

了解後請你在js檔案中寫入以下的程式碼。

const indicators = document.querySelectorAll(".indicator");
const images = document.querySelectorAll("img");

indicators.forEach((element, index) => {
  element.addEventListener("click", () => {
    images[index].scrollIntoView({
      block: "center",
      behavior: "smooth",
    });
  });
});

scrollIntoView這個語法可以傳入一個物件作為option，其中包含著以下的屬性

• block: 決定要以元素的哪個部分滑進畫面
• behavior: 決定滑動時的行為

到了這邊indicators的點擊功能就完成了，超簡單的對吧！

Step2: 隨著圖片滑動，更新indicator的狀態

正如畫面所示的，indicator其實會根據是否為當前圖片而有不同的樣式，眼尖的你也許已經在之前的css檔案中看到了active這個class，我們現在要做的就是在需要時替indicator加入該class，反之在不需要時移除該元素！

當牽扯到元素進入畫面便要進行某種操作時，就不得不提一下原生瀏覽器的一個很強大的API，Intersection Observer API，它的原理其實相當的直白，事實上它就只是一個監聽器，一樣可以掛載在任意的元素上，但當一般監聽器是監聽常見的click, change, input等事件時．Intersection Observer則是監聽元素進入指定的view area時的行為，且在語法上有它自己獨特的寫法，除此之外就沒有什麼特別的了！

詳細介紹這個API並不是我這個文章該做的事情，我會建議有興趣多了解的人可以參考我文末附上的兩個參考文章，是我認為中文資源中寫得不錯的，其中一個還是我的好麻吉Mike寫的文章，順便替他推廣一下 :D

最後，在動手前我們再次釐清等等要做些什麼吧！其實非常的單純，當圖片滑進畫面時，我們需要在對應的indicator加入active這個class，同時移除已經存在其他indicator上的active class。

請你先把以下的程式碼補充到js檔案中，我一樣會附上簡單的說明，但詳細的內容就麻煩你們去看看我提供的參考文章囉！

const gallery = document.querySelector(".gallery");

// 建立observer，也就是觀察元素是否進入畫面的監聽器
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      const targetIndex = entry.target.dataset.index;
      if (entry.isIntersecting) {
        indicators[targetIndex].classList.add("active");
      } else {
        indicators[targetIndex].classList.remove("active");
      }
    });
  },
  {
    root: null,
    rootMargin: "0px 0px 0px 0px",
    threshold: 0.5,
  }
);

// 利用剛建立的observer監聽所有的image元素
images.forEach((element) => {
  observer.observe(element);
});

• IntersectionObserver API

建立Observer時我們可以傳入兩個參數，分別是當元素進入指定範圍時你要執行的callback以及一個物件作為option，callback的部分他會預設一個參數表示與指定範圍交互的元素們，由於一次可能會有多個元素進入畫面，會需要以陣列的形式作表示。

option的部分則是可以指定元素交互的範圍，也就是你想要在元素進入哪個範圍時觸發我們傳入的callback，詳細情形一樣去參考文末的文章，謝謝 :+1:

• targetIndex

為了順利的在指定的indicator上加入active class，我在一開始的html檔案中就有偷偷的塞入dataset

<div class="image-slider">
    <img src="./cordyceps-g6aed79649_1280.jpeg" alt="" data-index="0" />
    <img src="./music-gde5d9786d_1280.jpeg" alt="" data-index="1" />
    <img src="./read-gaae49eae0_1280.jpeg" alt="" data-index="2" />
</div>

我們知道每一個圖片會對應一個indicator，因此我們就可以用對應的index dataset去操作正確的indicator囉！

再次的操作我們的頁面，你會發現一切就如我們的demo一樣！非常完美！

總結

今天我們完成了剩餘的image-slider功能，但就跟之前的小專案一樣，這個只能說是個開始而已！ 實際上它還存在著許多可以優化的空間，例如常見的左右箭頭(切換上下一張圖片)、無限滑動或是自動輪播等，這些其實都不會太過於困難，有興趣的可以自己挑戰看看！明天我們則會繼續挑戰其他的微型專案！

文章中的範例程式碼可以在這邊取得，歡迎自行取用

轉職Q & A

Danny，我與HR有安排好之後的面試了！ 面試前除了你之前說的基本問題之外，我還能做什麼準備呢？

也是個很好的問題，一般來說除了履歷上作品、個人經歷的相關問題之外，確實有幾個常見的準備方向(假設你跟我一樣是學網路開發的)。

1. 練習各種javascript的面試問題

我之前有提過，對於jr來說你會什麼工具、框架都不是這麼重要，但你js的底子一定要夠深，無論你走前端還是後端，js的問題永遠都是第一個被問到的，網路上已經有著相當多的題目夠你練習，你也可以參考我去年寫的系列文，根據參加過模擬面試同學的說法，確實有很多裡面的題目都被考出來 :P

2. 練習domain knowledge的問題

並不是指瀏覽器的那個domain，而是你所面試職位的一些核心知識。比方說你今天要面試前端的職缺，那麼基本的切版知識、瀏覽器運行的原理等都是你需要知道的，相對地若是後端的職缺，那麼你對於server的架設、路由的處理或是資料庫的操作等就必須有基本的理解。

3. 多少刷刷題

是的，我知道很多人會跟我爭論刷題的實用性，但這股風潮已經吹向台灣有段時間了，外商不用說，很多本土企業也開始用刷題來刷人，這就是現在的遊戲規則，因此你要做好面對白板題的心理準備，尤其你打算要進入規模較大的公司時，我知道不健康，但這確實是一個有效率的刷人方式，我並不怪企業這種做法。

本文章同步發布於個人部落格，有興趣的朋友也可以來逛逛~!

參考文章

認識Intersection Observer API
那些被忽略但很好用的 Web API / IntersectionObserver